<template>
  <div>
      <el-table
          :data="tableData"
          :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
          row-key="id"
          border
          max-height="510"
          @selection-change="handleSelectionChange"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            fixed
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="menuName"
            label="名称"
            sortable
            width="160">
        </el-table-column>
        <el-table-column
            prop="menuType"
            label="类型"
            :formatter="formatMenuType"
            width="100">
        </el-table-column>
        <el-table-column
            prop="menuIcon"
            label="图标"
            width="120">
            <template slot-scope="scope">
                <i style="font-size: 25px" :class="scope.row.menuIcon"></i>
            </template>
        </el-table-column>
        <el-table-column
            prop="menuPath"
            label="菜单路径"
            width="140">
        </el-table-column>
        <el-table-column
            prop="routerName"
            label="路由名称"
            width="140">
        </el-table-column>
        <el-table-column
            prop="routerComponent"
            label="路由组件"
            width="140">
        </el-table-column>
        <el-table-column
            prop="permission"
            label="权限"
            width="140">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            :formatter="formatStatus"
            width="100">
        </el-table-column>
        <el-table-column
            prop="gmtCreate"
            label="创建时间"
            width="160">
        </el-table-column>
        <el-table-column
            prop="createBy"
            label="创建人"
            width="80">
        </el-table-column>
        <el-table-column
            fixed="right"
            width="240"
            label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.menuType !== '2' && addChildShow" type="primary" @click="addMenu(scope.row)" size="mini">添加子项</el-button>
            <el-button v-if="editShow" type="primary" @click="editMenu(scope.row.id)" size="mini">修改</el-button>
            <el-button v-if="delShow" type="primary" @click="deleteMenu(scope.row.id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <PageC :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :pageSize="pageSize" :total="total" :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
import {deleteMenuById, getMenus} from "@/api/menu";
import PageC from "@/components/PageC";
import {Message} from "element-ui";
export default {
  name: "TableC",
  components: {PageC},
  data() {
    return {
    }
  },
  methods: {
    formatMenuIcon(row) {
      return "<i class='" + row.menuIcon + "'></i>"
    },
    formatMenuType(row) {
      return row.menuType === "1" ? "菜单" : row.menuType === 0 ? "目录" : "按钮"
    },
    formatStatus(row) {
      return row.status === "0" ? "激活" : row.status === "1" ? "隐藏" : "禁用"
    },
    handleSelectionChange(val) {
       this.multipleSelection = val.map((item) => {return item.id;})
      },
    getMenus() {
      var params = {
        "current": this.$store.state.menu.currentPage,
        "size": this.$store.state.menu.pageSize
      };
      getMenus(params).then((res) => {
        this.$store.state.menu.tableData = res.data.data;
        this.$store.state.menu.total = res.data.total;
      })
    },
    addMenu(row) {
      var params = {
        dialogFormVisible: true,
        parentId: row.id,
        parentName: row.menuName,
        dialogTitle: '添加菜单'
      }
      this.$store.commit("menu/openDialogForm", params)
    },
    editMenu(id) {
      this.$store.dispatch("menu/editMenu", id);
    },
    deleteMenu(id) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenuById(id).then((res) => {
          Message.success(res.data.msg);
          this.getMenus();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleSizeChange(val) {
      this.$store.state.menu.pageSize = val;
      this.getMenus();
    },
    handleCurrentChange(val) {
      this.$store.state.menu.currentPage = val;
      this.getMenus();
    }
    },
  props: {
    topLevel: {
      required: false,
      default: -1,
      type: Number
    },
    tableData: {
      type: Array,
      required: true,
    },
    addChildShow: {
      required: true,
      default: false,
      type: Boolean
    },
    editShow: {
      required: true,
      default: false,
      type: Boolean
    },
    delShow: {
      required: true,
      default: false,
      type: Boolean
    }
  },
  computed: {
    // 选中行id
    multipleSelection: {
      get() {
        return this.$store.state.menu.multipleSelection;
      },
      set(value) {
        this.$store.state.menu.multipleSelection = value;
      }
    },
    total: {
      get() {
        return this.$store.state.menu.total;
      },
      set(value) {
        this.$store.state.menu.total = value;
      }
    },
    pageSize: {
      get() {
        return this.$store.state.menu.pageSize;
      },
      set(value) {
        this.$store.state.menu.pageSize = value;
      }
    },
    currentPage: {
      get() {
        return this.$store.state.menu.currentPage;
      },
      set(value) {
        this.$store.state.menu.currentPage = value;
      }
    },
  },
  mounted() {

  }
}

</script>

<style scoped>

</style>
